import React, { Component } from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { colors } from 'bee/themes';
import { request } from 'bee/utils/request';

// @flow
type props = {
  navigation: object,
};

export default class QRCode extends Component<props> {
  constructor() {
    super();

    this.state = {
      QRCode: '',
    };
  }
  componentDidMount() {
    request('/QRcode').then(({ body }) => {
      console.log(body);

      this.setState({
        QRCode: body.QRCode,
      });
    });
  }

  render() {
    const { params } = this.props.navigation.state;
    return (
      <View style={styles.outerBox}>
        <View style={styles.upperBox}>
          <Image source={{ uri: params.portrait }} style={styles.portrait} />
          <View style={styles.textBox}>
            <Text>{params.username}</Text>
            <Text>营销编码：{params.code}</Text>
          </View>
        </View>
        <Image
          source={{ uri: this.state.QRCode }}
          resizeMode="contain"
          style={{ flex: 1 }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  portrait: {
    height: px2dp(150),
    width: px2dp(150),
    borderRadius: px2dp(75),
  },
  outerBox: {
    backgroundColor: colors.white,
    flex: 1,
    padding: px2dp(30),
  },
  upperBox: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  textBox: {
    marginLeft: px2dp(20),
  },
});
